<template>
    <div>
        <div class="pav-switch-rank-btn-group pav-row">
            <div class="pav-switch-rank-btn pav-rank-btn-active pav-text">30天榜</div>
            <div class="pav-switch-rank-btn pav-text">赛季榜</div>
        </div>
        <el-table
            class="pav-rank-table"
            :data="tableData"
            border
            :default-sort="{prop: 'index', order: 'descending'}"
            :header-cell-style="{color:'#fce93d',borderColor:'#1bd0ed',background:'#16586a'}"
            :cell-style="{color:'#fce93d',borderColor:'#1bd0ed',background:'#16586a'}"
        >
            <el-table-column label="序号" type="index" width="70"></el-table-column>
            <!--            <el-table-column-->
            <!--                fixed="left"-->
            <!--                label="总排名"-->
            <!--                width="100">-->
            <!--                <template slot-scope="scope">-->
            <!--                    <span>{{scope.row}}</span>-->
            <!--                </template>-->
            <!--            </el-table-column>-->
            <el-table-column prop="userName" label="用户昵称"></el-table-column>
            <el-table-column prop="kill" label="击杀"></el-table-column>
            <el-table-column prop="death" label="阵亡"></el-table-column>
            <el-table-column prop="support" label="支援"></el-table-column>
            <el-table-column prop="point" label="得分"></el-table-column>
            <el-table-column prop="kda" label="KDA"></el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    name: "RankList",
    data() {
        return {
            tableData: []
        }
    },
    methods: {
        genRandomWords(e) {
            e = e || 8;
            let t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
                a = t.length,
                n = "";
            for (let i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
            return n
        }
    },
    mounted() {
        for (let i = 0; i < 35; i++) {
            this.tableData.push({
                userName: this.genRandomWords(),
                kill: parseInt(Math.random()*(2000-1000)+1000),
                death: parseInt(Math.random()*(2000-1000)+1000),
                support: parseInt(Math.random()*(2000-1000)+1000),
                point: parseInt(Math.random()*(2000-1000)+1000),
                kda: 2.31,
            })
        }
    }
}
</script>

<style scoped lang="scss">
$borderColor: #1bd0ed;
$textColor: #fce93d;
::v-deep .el-table tr {
    background-color: #16586a !important;
    color: $textColor !important;
}

::v-deep .el-table__cell {
    background-color: #16586a !important;
}

::v-deep .el-table--border::after, .el-table--group::after, .el-table::before {
    background-color: transparent;
}

::v-deep .el-table--border, .el-table--group {
    border-top: 1px solid $borderColor;
    border-left: 1px solid $borderColor;
    border-right: 1px solid $borderColor;
}

.pav-rank-list {
    border: solid 2px #1bd0ed;
}

.pav-switch-rank-btn-group {
    margin-bottom: 10px;
    //border-bottom: solid 2px #1bd0ed;

    .pav-switch-rank-btn {
        width: 168px;
        height: 83px;
        padding-bottom: 15px;
        background-image: url("../assets/img/classBtn.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        align-content: center;
        font-style: italic;
        font-size: 18px;
        font-weight: bold;
    }

    .pav-switch-rank-btn:hover {
        cursor: pointer;
    }

    .pav-rank-btn-active {
        background-image: url("../assets/img/classBtnAc.png");
    }
}

.pav-rank-table {
}
</style>
